<template>
  <div class="bg-white pb-4 w-full rounded-xl overflow-hidden md:w-[350px] md:mx-auto">
    <cavas-post
      @cavasrc="cavaSrc"
      :qr-url="copyUrl"
      :title="title"
      :nick-name="nickName"
      :avatar-url="avatarUrl || DengTaPng"
    ></cavas-post>

    <v-sheet
      style="height: 30px; user-select: none"
      class="mt-2 transparent d-flex justify-center align-center text-black bg-white"
      elevation="0"
    >
      <img :src="FingerprintPng" height="23px" width="20px" />
      长按图片可保存
    </v-sheet>
    <div class="d-flex justify-center">
      <v-btn color="primary" text @click="handleCopyUrl"> 复制分享链接 </v-btn>
    </div>
  </div>
</template>
<script>
import CavasPost from "../../CanvasPost/index.vue";
import { copyText } from "@/utils/utils";
import DengTaPng from "@/assets/dengta.png";
import FingerprintPng from "@/assets/fingerprint.png";
export default {
  name: "share-index",
  components: { CavasPost },
  props: {
    copyUrl: {
      type: String,
    },
    title: {
      type: String,
    },
    nickName: {
      type: String,
    },
    avatarUrl: {
      type: String,
    },
    propVisable: {
      type: Boolean,
    },
  },
  data() {
    return {
      cavaPostSrc: "",
      copyurlvisble: false,
      defaultDesc: "歌单分享",
      DengTaPng,
      FingerprintPng,
    };
  },

  methods: {
    cavaSrc(src) {
      this.cavaPostSrc = src;
    },
    handleCopyUrl() {
      try {
        copyText(this.copyUrl);
        this.$toast.success("链接已复制到剪切板");
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped>
.shareLine {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.shareLine img {
  position: absolute;
  top: 0;
  right: 20px;
}

.shareLine .shareLine-text {
  position: absolute;
  width: 300px;
  top: 50px;
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
  color: white;
  font-weight: 600;
}
</style>
